<template>
  <a-modal
    title="添加管理员"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="1024"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok', chooseData) }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <s-table
        ref="table"
        size="default"
        rowKey="customer_id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        alert
        :rowSelection="{
          onChange: onChange
        }"
      >
        <span slot="sex" slot-scope="text">
          <template>
            <div>{{ text | SEX }}</div>
          </template>
        </span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
      </s-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import pick from 'lodash.pick'
import { adminList } from '@/api'

// 表单字段
const fields = ['objects', 'service_name', 'image', 'explain']
const statusMap = {
  0: {
    status: 'default',
    text: '未激活'
  },
  1: {
    status: 'success',
    text: '启用'
  },
  2: {
    status: 'error',
    text: '停用'
  },
  3: {
    status: 'error',
    text: '删除'
  }
}
const columns = [
  {
    title: '姓名',
    dataIndex: 'fullname',
    align: 'center'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    align: 'center',
    scopedSlots: { customRender: 'sex' }
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  }
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      form: this.$form.createForm(this),
      currentLength: 0,
      loadData: async parameter => {
        const params = {
          page: parameter.pageNo,
          per_page: parameter.pageSize,
          set_role: 1
        }
        const res = await adminList({ ...params })
        const result = {
          pageNo: res.current_page || 1,
          totalPage: res.last_page || 1,
          data: res.data,
          pageSize: 10,
          totalCount: res.total || res.data.length
        }
        return Promise.resolve(result)
      },
      columns,
      chooseData: []
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    textareaChange () {
      this.form.validateFields((errors, values) => {
        this.currentLength = values.explain.length
      })
    },
    onChange (e) {
      this.chooseData = e
    }
  },
  components: {
    STable
  }
}
</script>
